<template>
<div class="article">
    <div class="title">
        <h1>{{data.title}}</h1>
        <p>
            <span class="label">{{data.rangeId | Rescue}}</span>
            <span class="time">{{data.createDate}}</span>
        </p>
    </div>
    <div class="time">本文一共{{textLen}}字，读完预计{{speed}}分钟。</div>
    <div class="con" v-html="data.content">
        <!-- <h1>告诉抛锚怎么办?</h1>
        <p>行走在高速道路上面车抛锚了，该行走在高速道路上面车抛锚了，该行走在高速道路上面车抛锚了，该行走在高速道路上面车抛锚了，该行走在高速道路上面车抛锚了，该行走在高速道路上面车抛锚了，该行走在高速道路上面车抛锚了，该行走在高速道路上面车抛锚了。</p>
        <img src="" alt="img"> -->
    </div>
</div>
</template>

<script>
import { articleDetails } from '../../../../config/getData'
export default {
	data(){
		return{
			data:[],
			textLen:0
		}
	},
	computed: {
		speed(){
		return (this.textLen / 308).toFixed(2)
		}
	},
	mounted(){
		this.init();
		this.textLen = document.getElementsByClassName('article')[0].innerText.length

		articleDetails(this.$route.params.id).then( res => {
			this.data = res.rows;
		})

	},
	methods:{
		init(){

		}
	}
}
</script>


<style lang="scss" scoped>
.article{background-color: white;position: fixed;left:0;top:0;width:100%;height: 100%;overflow-y:auto;z-index:10;
    .title{padding:15px;
        h1{font-size: 22px;}
        p{line-height: 1;font-size: 0;margin-top:20px;color:#383838;}
        span{font-size:16px;}
        .time{display: inline-block;margin-left:5px;padding-left:5px;border-left:1px solid #e6e6e6;}
    }
    > .time{line-height: 43px;color:#929292;text-align: center;border:1px solid #eee;border-left:none;border-right: none;}

    .con{padding:15px;color:#383838;
        img{width:100%;min-height: 60px;background-color: #f5f5f5;display: block;margin:15px 0;}
        h1{font-size:18px;font-weight: normal;}
        p{margin:4px 0 15px;color: #636363;}
    }
}
</style>

